// Treasure target height , assume the treasure is a square
window.GOODS_ANIMATION_MAX_WIDTH = 105;
// animation implement type
window.ANIMATION_IMPLEMENT_TYPE = {
	jquery : "jquery",
	custom : "custom"
};

/**
 * Define a animation utility Class.
 */
var AnimationUtil = {
	/**
	 * Get the treasure center position relative to the lattice store this
	 * treasure.
	 * 
	 * @param event
	 */
	getTreasureCenterPosition : function(e) {
		var w = $(window);
		var ww = w.width(), wh = w.height(), sl = w.scrollLeft(), st = w.scrollTop(), ex = e.pageX, ey = e.pageY;
		// page entire width and height
		var pageHeight = wh + st, pageWidth = ww + sl;
		// the lattice screen Y position (consider window top = 0 , left = 0)
		var latticeScreenY = wh - (pageHeight - ey), latticeScreenX = ww - (pageWidth - ex);
		// the treasure screen X,Y relative to the lattice
		var treasureScreenY = wh / 2 - latticeScreenY - GOODS_ANIMATION_MAX_WIDTH;
		var treasureScreenX = ww / 2 - latticeScreenX - GOODS_ANIMATION_MAX_WIDTH / 2;
		return new Position(treasureScreenX, treasureScreenY);
	},

	/**
	 * Get the treasure type.
	 */
	getTreasure : function(e) {
		var latticeId = "#" + e.target.id;
		// the treasure object
		return new Treasure($(latticeId + " > img.treasure"));
	},

	getLattice : function(e) {
		var latticeId = "#" + e.target.id;
		// the lattice jQuery object
		return new Lattice($(latticeId));
	}
};

/**
 * Define a animation handler for centralize the animation handle.
 */
var AnimationHandler = {
	/**
	 * Fire the animation.
	 * 
	 * @param event
	 */
	fireAnimation : function(e) {
		var treasure = AnimationUtil.getTreasure(e);
		$.each(AnimationSettings[treasure.type], function(index, animationSetting) {
			var animation = Animations[animationSetting.name];
			var type = animation.type;
			if (type === ANIMATION_IMPLEMENT_TYPE.jquery) {
				setTimeout(function() {
					animation.play(e);
				}, animationSetting.delay);
			} else {
				treasure.obj.queue(function(next) {
					setTimeout(function() {
						animation.play(e);
					}, animationSetting.delay);
					next();
				});
			}
		});
	}
};

/**
 * Setting the animation for each type of treasure.
 */
var AnimationSettings = {
	// animate define for diamond type treasure
	diamond : [ {
		name : "progressivePop",
		delay : 0
	}, {
		name : "progressiveMinify",
		delay : 1500
	} ],

	// animate define for bomb type treasure
	bomb : [ {
		name : "progressivePop",
		delay : 0
	}, {
		name : "shocking",
		delay : 300
	}, {
		name : "progressiveMinify",
		delay : 1500
	} ]

};

/**
 * All animations definition.
 */
var Animations = {
	/**
	 * Play the animation when user click the masked treasure.
	 * 
	 * @param e
	 */
	progressivePop : {
		"play" : function(e) {
			var treasureCenterPosition = AnimationUtil.getTreasureCenterPosition(e);
			// the lattice jQuery object
			var lattice = AnimationUtil.getLattice(e).obj;
			// the treasure object
			var treasure = AnimationUtil.getTreasure(e).obj;

			// hide lattice
			lattice.animate({
				"height" : "0px",
				"width" : "0px"
			}, 120, function() {
				// unbind the click action .
				lattice.unbind("click");
				// treasure css
				treasure.css({
					"display" : "",
					"position" : "relative"
				});
				// treasure animation
				treasure.animate({
					"height" : GOODS_ANIMATION_MAX_WIDTH + "px",
					"left" : treasureCenterPosition.x + "px",
					"top" : treasureCenterPosition.y + "px"
				}, 350);
			});
		},
		"type" : ANIMATION_IMPLEMENT_TYPE.jquery
	},

	/**
	 * progressive minify
	 * 
	 * @param e
	 */
	progressiveMinify : {
		"play" : function(e) {
			var target = AnimationUtil.getTreasure(e).obj;
			// treasure animation
			target.animate({
				"height" : "0px",
				"left" : ($(window).width() / 2) + "px",
				"top" : "0px"
			}, 350, function() {
				target.css({
					"display" : "none",
					"position" : "relative"
				});
			});
		},
		"type" : ANIMATION_IMPLEMENT_TYPE.jquery
	},

	/**
	 * Transparency
	 */
	transparency : {
		"play" : function(e) {
			var treasure = AnimationUtil.getTreasure(e);
			treasure.obj.animate({
				"opacity" : 0
			}, 50);
		},
		"type" : ANIMATION_IMPLEMENT_TYPE.custom
	},

	/**
	 * Shocking
	 * 
	 * @param e
	 */
	shocking : {
		"play" : function(e) {
			var treasure = AnimationUtil.getTreasure(e);
			var shockMaxOffset = 4;

			var shockPosition = [ 'top', 'left' ], count = 0;
			shockIntervalObject = setInterval(function() {
				var randomPosition = shockPosition[count % 2];
				var shockOffset = (count++) % shockMaxOffset < 2 ? 0 : shockMaxOffset;
				var treasureCenterPosition = AnimationUtil.getTreasureCenterPosition(e);
				if (randomPosition == 'top') {
					shockOffset += treasureCenterPosition.y;
				} else {
					shockOffset += treasureCenterPosition.x;
				}
				treasure.obj.css(randomPosition, shockOffset);
				if (count > 35) {
					clearInterval(shockIntervalObject);
					count = 0;
				}
			}, 32);
		},
		"type" : ANIMATION_IMPLEMENT_TYPE.custom
	},

	/**
	 * @param e
	 */
	explode : {
		"play" : function(e) {
		},
		"type" : ANIMATION_IMPLEMENT_TYPE.custom
	}

};